<template>
  <div class="imgUploadContainer">
    <div class="imgUploadPanel">
      <div class="upBtn" v-if="!value">
        <label
          for="imgUploadInput"
          class="imgUploadInputArea"
          @dragenter.stop.prevent
          @dragover.stop.prevent
          @drop.stop.prevent="onDrop"
          >{{$t('message.text.clickHereOrDrag')}}</label
        >
        <input
          type="file"
          accept="image/*"
          id="imgUploadInput"
          @change="onImgUploadInputChange"
        />
      </div>
      <div v-if="value" class="uploadInfoBox">
        <div
          class="previewBox"
          :style="{ backgroundImage: `url('${value}')` }"
        ></div>
        <el-icon class="delBtn" @click="deleteImg"><Close /></el-icon>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
const emit = defineEmits(['update:value','change'])
const props = defineProps({
  value: {
    type: String,
    default: "",
  },
})

const file = ref(null)

/**
 * @Author: 王林
 * @Date: 2019-12-22 19:47:19
 * @Desc: 图片选择事件
 */
function onImgUploadInputChange(e) {
  let file = e.target.files[0];
  selectImg(file);
}

/**
 * @Author: 王林
 * @Date: 2019-12-22 20:32:31
 * @Desc: 拖动上传图片
 */
function onDrop(e) {
  let dt = e.dataTransfer;
  let file = dt.files && dt.files[0];
  selectImg(file);
}

/**
 * @Author: 王林
 * @Date: 2021-06-06 16:56:14
 * @Desc: 选择图片
 */
function selectImg(file) {
  file.value = file;
  let fr = new FileReader();
  fr.readAsDataURL(file);
  fr.onload = (e) => {
    emit("update:value", e.target.result);
    emit('change', e.target.result)
  };
}

/**
 * @Author: 王林
 * @Date: 2021-06-22 23:03:46
 * @Desc: 获取图片大小
 */
function getSize() {
  return new Promise((resolve, reject) => {
    let img = new Image();
    img.src = props.value;
    img.onload = () => {
      resolve({
        width: img.width,
        height: img.height,
      });
    };
    img.onerror = (e) => {
      resolve({
        width: 0,
        height: 0,
      });
    };
  });
}

/**
 * @Author: 王林
 * @Date: 2021-06-06 21:59:57
 * @Desc: 删除图片
 */
function deleteImg() {
  emit("update:value", "");
  emit('change', "")
  file.value = null;
}

defineExpose({
  getSize
})

</script>


<style lang="scss" scoped>
.imgUploadContainer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255,255,255,.9);
    z-index: 1000;

    .imgUploadPanel {
        position: relative;
        width: 100%;
        font-size: 22px;
        white-space: nowrap;
        color: #909090;
        cursor: default;
        user-select: none;
    
        .title {
            margin-bottom: 15px;
            font-size: 22px;
            font-weight: 700;
            color: hsla(218,9%,51%,.8);
        }

        .closeBtn {
            position: absolute;
            right: 25px;
            top: 32px;
            cursor: pointer;
        }

        .imgUploadInputArea {
            display: block;
            width: 100%;
            height: 200px;
            font-size: 20px;
            color: rgba(51,51,51,.4);
            background-color: hsla(0,0%,87%,.6);
            border: none;
            outline: none;
            cursor: pointer;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            white-space: normal;
            padding: 10px;
            box-sizing: border-box;
        }

        #imgUploadInput {
            display: none;
        }

        .uploadInfoBox {
            position: relative;
            width: 100%;
            height: 200px;
            background-color: hsla(0,0%,87%,.6);

            .previewBox {
                width: 100%;
                height: 100%;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }

            .delBtn {
                position: absolute;
                right: 0px;
                top: 0px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-color: #fff;
            }
        }
    }
}
</style>
